<template>
  <div class="map-wrapper">
    <!-- 顶部左侧悬浮下拉栏组 -->
    <div class="map-header-left">
      <!-- 切换校区 -->
      <el-dropdown @command="handleCampus">
        <el-button type="primary">
          切换校区
          <el-icon class="ml-1"><ArrowDown /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="center">中心泵房</el-dropdown-item>
            <el-dropdown-item command="west">西苑泵房</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>


    </div>

    <!-- 地图容器 -->
    <div class="map-container" ref="mapContainer"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue'; // 引入下拉箭头图标

let map = null;
const mapContainer = ref(null);
const areaVisible = ref(false); // 初始状态：隐藏分区

// 切换校区逻辑
const handleCampus = (command) => {
  console.log('切换校区：', command);
  if (command === 'center') {
    map.centerAndZoom(new BMapGL.Point(114.361280, 30.482050), 18); // 中心泵房中心坐标
  } else if (command === 'west') {
    map.centerAndZoom(new BMapGL.Point(114.351279,30.482264), 18); // 西苑泵房中心坐标
  }
};



onMounted(() => {
  // 初始化百度地图
  map = new BMapGL.Map(mapContainer.value, { minZoom: 16, maxZoom: 20 });
  map.centerAndZoom(new BMapGL.Point(114.361280, 30.482050), 18);
  map.enableScrollWheelZoom(true);
  map.enableKeyboard(true);
  map.addControl(new BMapGL.ScaleControl());
  map.addControl(new BMapGL.ZoomControl());
});

onUnmounted(() => {
  if (map) {
    map.clearOverlays();
    map = null;
  }
});
</script>

<style scoped>
.map-wrapper {
  width: 100%;
  height: calc(100vh - 84px);
  position: relative;
}

/* 顶部左侧悬浮栏样式 */
.map-header-left {
  position: absolute;        /* 绝对定位，其位置为相对于wrapper的位置 */
  top: 1%;              /* 距离顶部间距 */
  left: 1%;
  z-index: 1000;          /* 确保在地图上方 */
  display: flex;
  align-items: center;
  gap: 15px;              /* 按钮间距 */
}

.map-container {
  width: 100%;
  height: 100%;           /* 填充父容器高度 */
  font-family: "微软雅黑";
}
</style>